<template>
  <div class="Feedback">

    <van-field v-model="form.content" placeholder="请输入您要反馈的问题（150字以内）" type="textarea" class="content" maxlength="150" show-word-limit required />
    <van-field v-model="form.telphone" placeholder="留下电话联系方式，可以更快解决问题呦~" class="telphone" required />
    <van-button type="primary" round color="#ff7733" class="back" @click="submit">提交</van-button>
  </div>
</template>
<script>
import { Toast, Dialog } from 'vant';
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      form: {
        content: "",
        telphone: "",
      }
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  methods: {
    submit () {
      let { content, telphone } = this.form
      if (content && telphone) {
        this.$axios.post(this.$api.UserFeedback, {
          content,
          telphone
        }).then((res) => {

          if (res.data.code == 1) {
            Dialog.alert({
              message: '感谢反馈，会尽快给您答复的',
              confirmButtonColor: '#FF7733'
            }).then(() => {
              this.$router.replace({ name: 'my' })
            });
          } else {
            Toast.fail(res.msg);
          }

        })
      } else {
        Toast.fail('请您完整填写');
      }
    }
  }
};
</script>
<style lang='less' scoped>
.Feedback {
  margin-top: 12px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #f6f6f6;
}
.content {
  width: 343px;
  height: 164px;
  background: #ffffff;
  border-radius: 6px;
  /deep/.van-field__body {
    height: 123.75px;
    textarea {
      height: 100%;
    }
  }
}
.telphone {
  margin-top: 12px;
  width: 343px;
  height: 43px;
  background: #ffffff;
  border-radius: 6px;
}
.back {
  width: 343px;
  height: 44px;
  margin-top: 60px;
}
</style>